!
<template>
  <div>
    <a-form
      :model="formState"
      ref="formRef"
      :rules="rules"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <a-form-item label="id" name="id">
        <a-input v-model:value="formState.id" placeholder="id">
        </a-input>
      </a-form-item>
      <a-form-item label="姓名" name="userName">
        <a-input v-model:value="formState.userName" placeholder="姓名">
        </a-input>
      </a-form-item>

      <a-form-item label="年龄"  name="age">
        <a-input-number
          id="inputNumber"
          placeholder="年龄"
          v-model:value="formState.age"
          :min="1"
          :max="100"
        />
      </a-form-item>
      <a-form-item label="注册时间"  name="registTime">
        <a-date-picker
          v-model:value="formState.registTime"
          :show-time="{ format: 'HH:mm:ss' }"
        />
      </a-form-item>
      <a-form-item label="出生日期" name="birthday">
        <a-date-picker v-model:value="formState.birthday" />
      </a-form-item>

      
    </a-form>
    <div style="text-align:right">
      <a-space>
          <a-button type="primary" @click="save"> Save </a-button>
          <a-button > Close </a-button>
          <i
            v-if="!debugModel"
            @click="openDebugInfo"
            class="iconfont icon-left"
            style="font-size: 18px; font-weight: bold; cursor: pointer"
          ></i>
          <i
            v-if="debugModel"
            @click="closeDebugInfo"
            class="iconfont icon-down"
            style="font-size: 18px; font-weight: bold; cursor: pointer"
          ></i>
        </a-space>
    </div>
    <div v-if="debugModel">
      <a-alert type="warning"
        ><template #message>formState : {{ formState }}</template></a-alert
      >
    </div>
  </div>
</template>

<script setup lang="ts">
import { Modal ,message} from "ant-design-vue";
import { ref, reactive,onMounted } from "vue";
import _ from "lodash";
import ThdFramesetExampleAPI from "@/api/ThdFramesetExampleAPI";
import dayjs, { Dayjs } from 'dayjs';

const props = defineProps({
  id:{
    type:String,
    default:''
  },
  cb:{
    type:Function,
    default:()=>()=>{}
  }
})

onMounted(function () {
  if (props.id) {
    loadThdFramesetExampleById(props.id)
  }
});

const loadThdFramesetExampleById = function(id){
  ThdFramesetExampleAPI.queryThdFramesetExampleById(id).then(r => {
    formState.value = r.result
    if(r.result.birthday){
      formState.value.birthday = dayjs(r.result.birthday);
    }
    if(r.result.registTime){
      formState.value.registTime = dayjs(r.result.registTime);
    }

  })
}

const rules = {
  userName: [
    { required: true, message: '必填!' },
    { max: 200, message: '必须小于200个字符!' },
  ],
  age: [
    { required: true, message: '必填!' }
  ],
  total: [
    { required: true, message: '必填!' }
  ],
  birthday: [
    { required: true, message: '必填!' }
  ],
  registTime: [
    { required: true, message: '必填!' }
  ],
};


const labelCol = { span: 5 };
const wrapperCol = { span: 13 };

const formRef = ref();

const [modal, contextHolder] = Modal.useModal();

let debugModel = ref(false);
function openDebugInfo() {
  debugModel.value = true;
}
function closeDebugInfo() {
  debugModel.value = false;
}


let formState= ref({});

function resetFrom() {
  formRef.value.resetFields();
}


async function save() {
  try {
    const values = await formRef.value.validateFields();
    // console.log('Success:', values);

    if (values.birthday) {
      values.birthday = dayjs(values.birthday).format('YYYY-MM-DD');
    }
    if (values.registTime) {
      values.registTime = dayjs(values.registTime).format('YYYY-MM-DD HH:mm:ss');
    }
   
    console.log(values)
    ThdFramesetExampleAPI.saveOrUpdateThdFramesetExample(values).then(r => {
      message.success("保存成功");
      props.cb();
    })
  } catch (errorInfo) {
    console.log('Failed:', errorInfo);
  }
}


</script>

<style scoped>
:deep(:where(.css-dev-only-do-not-override-hnzzmb).ant-form-item) {
  margin-bottom: 24px;
}
</style>